<!--
 * @Description: 
 * @Author: wuhaohu
 * @Date: 2023-02-27 13:39:36
 * @LastEditors: wuhaohu
 * @LastEditTime: 2023-02-27 16:13:47
 * @FilePath: \yidiandian\src\components\Home\Header.vue
-->
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();

const routerDetail = (name: string) => {
  router.push(name);
};
// const user = await userApi.getUserProfile()
// console.log(user, '获取用户信息')
</script>
<template>
  <div class="header">
      <img class="title" src="../../assets/images/logo.png" />
      <div class="nav">
        <div :class="`nav-btn ${router.currentRoute.value.name == 'index' ? 'active' : ''}`" @click="routerDetail('index')">首页</div>
        <div :class="`nav-btn ${router.currentRoute.value.name == 'about' ? 'active' : ''}`" @click="routerDetail('about')">关于我们</div>
      </div>
    </div>
</template>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  .title {
    height: 100%;
    width: auto;
  }
  .nav {
    display: flex;
    .nav-btn {
      height: 100%;
      line-height: 40px;
      color: #83718a;
      cursor: pointer;
      &.active {
        position: relative;
        color: #f5f2f6;
        &::after {
          position: absolute;
          background-color: #f5f2f6;
          content: '';
          width: 12px;
          height: 3px;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          border-radius: 4px;
        }
      }
      &:last-child {
        margin-left: 48px;
      }
    }
  }
}
</style>
